<template>
  <div>
    <van-nav-bar
        left-arrow
        @click-left="handleClickLeft"
        :title="$t('信用状况')"
    >
    </van-nav-bar>

    <div class="tab_progress">
      <span style="vertical-align: middle;background-color: #FFE1AD;padding: 10px;border-radius: 20px">Step 5</span>
    </div>
    <div class="wrapper">
      <div class="cell_content_list">
        <div class="cell_content_item" v-for="(item,index) in  creditInfoData" :key="item.id" @click="handleClick(item)">

          <div class="text">
            {{ item.content }}
          </div>
          <div style="position: relative">
            <input class="input" v-model="creditInfoForm[item.questionId].value" @blur="confirmPoint(index + 1)" :readonly="true"
                   :placeholder="$t('请选择')"/>
            <img class="input_icon" src="../../assets/my/input_right.png">
          </div>

        </div>

      </div>

    </div>
    <div style="text-align: center;margin: 30px 0 ;">
      <van-button class="confirm" round type="primary" @click="saveCreditConfirm">{{ $t('下一步') }}</van-button>
    </div>
    <van-popup v-model:show="dialogRetentionShow">
      <template #default>
        <div class="dialog_body">
          <div class="content_text">Application is successful immediately
            <p class="active">Get your money instantly in just 2 steps</p>
            Do you really want to quit?
          </div>
          <div style="margin-top: 20px;text-align: center">
            <van-button type="primary" style="width: 80%" @click="dialogRetentionShow = false" round>{{ $t('继续申请') }}</van-button>
            <van-button class="reject_btn" @click="$router.replace('/hScmlvxSUkDQ/UjRzDSClllpS')" round>
              {{ $t('残忍拒绝') }}
            </van-button>
          </div>
        </div>
      </template>
    </van-popup>
    <!--       选择弹窗-->
    <van-action-sheet v-model:show="creditItemShow">
      <van-picker @confirm="selectConfirm" @cancel="creditItemShow = false"
                  :columns-field-names="{  text: 'value'}"
                  :columns="selectColumns"/>
    </van-action-sheet>
  </div>
</template>

<script>
import {debounce, processNext, setResourcesShow, upLoadAdjustPoint} from "@/utils/tool";
import {onMounted, ref} from "vue";
import {useStore} from "vuex";
import {fetchCreditInfo, addCreditInfo} from "@/api/home"
import {Dialog, Toast} from "vant";
import {useI18n} from "vue-i18n";
import {useRoute, useRouter} from "vue-router";
import router from "@/router";
import {upLoadInputPoint, upLoadPoint} from "@/api/my";

export default {
  name: "creditInfo",
  setup() {
    const resourcesShow = ref({})
    const creditInfoData = ref([])
    const creditInfoForm = ref({
      1:{
        key:null,
        value:null,
      },
      2:{
        key:null,
        value:null,
      },

      3:{
        key:null,
        value:null,
      },
      4:{
        key:null,
        value:null,
      },
    })
    const creditItemShow = ref(false)
    const selectColumns = ref(null)
    const dialogRetentionShow = ref(false)
    const selectKey = ref(null)
    const store = useStore()
    const {t} = useI18n()
    const routes = useRoute()
    // 流程显示隐藏
    const getResourcesShow = async () => {
      resourcesShow.value = await setResourcesShow(3)
      // 清除loading
      store.dispatch('changeLoading', false)
    }

    async function getData() {
      const res = await fetchCreditInfo()
      if (res.code === 1) {
        creditInfoData.value = res.data
      }
    }

    function handleClick(row) {
      creditItemShow.value = true
      selectColumns.value = row.userQuestionList.map(item => {
        item.value = item.content
        item.key = item.id
        return item
      })
      selectKey.value = row.id
    }

    function selectConfirm(item) {
      creditInfoForm.value[item.questionId] = {
        value: item.value,
        key: item.answer
      }
      creditItemShow.value = false
      console.log(creditInfoForm.value)
    }

    const saveCreditConfirm = debounce(
        async () => {
          const message = verificationInfo()
          console.log(message)
          if (!message) {
            const params = {}
            let num = 6
            for (const key in creditInfoForm.value) {
              params['question' + (num ++)] = creditInfoForm.value[key].key
            }
            const res = await addCreditInfo(params)
            console.log(res)
            if (res.code === 1) {
              Toast({
                message: t('提交成功')
              })
              confirmPoint(0)
              processNext('creditInfo')
              upLoadAdjustPoint({eventName:'8sboxz'})
            } else {
              Toast({
                message: res.message
              })
            }
          } else {
            upLoadPoint({type: 11})
            Toast({
              message: message
            })
          }

        }
    )

    function verificationInfo() {
      if (creditInfoForm.value[1].key === null) {
        return t('请选择') + creditInfoData.value.find(item => item.questionId === 1).content
      }
      if (creditInfoForm.value[2].key === null) {
        return t('请选择') + creditInfoData.value.find(item => item.questionId === 2).content
      }
      if (creditInfoForm.value[3].key === null) {
        return t('请选择') + creditInfoData.value.find(item => item.questionId === 3).content
      }
      if (creditInfoForm.value[4].key === null) {
        return t('请选择') + creditInfoData.value.find(item => item.questionId === 4).content
      }

      return false
    }
    // 提交埋点数据
    function confirmPoint(detailType) {
      upLoadInputPoint({
        type: 4,
        detailType: detailType
      })
    }
    function handleClickLeft() {
      upLoadPoint({type: 10})
      dialogRetentionShow.value = true
    }
    onMounted(() => {
      getResourcesShow()
      getData()
    })
    return {
      dialogRetentionShow,
      handleClickLeft,
      creditItemShow,
      selectColumns,
      creditInfoForm,
      creditInfoData,
      resourcesShow,
      handleClick,
      selectConfirm,
      confirmPoint,
      saveCreditConfirm
    }
  }
}
</script>

<style lang="less" scoped>

.wrapper {
  box-sizing: border-box;
  background-color: #FFFFFF;
  padding: 15px 0;
}
</style>
